<template>
  <div class="work">
    <div class="work-left">
      <div class="conter-box renkouqinkuan">
        <div class="conter-title"><span>工作动态概览</span></div>
        <div class="conter-detail">
          <div class="other-person">
            <div class="party">
              <p class="teshurenqun">事项办理</p>
              <ul>
                <li>
                  <span>待受理</span>
                  <span><strong>{{ 13 }}</strong></span>
                </li>
                <li>
                  <span>已受理</span>
                  <span><strong>{{ 34 }}</strong></span>
                </li>
                <li>
                  <span>已完成</span>
                  <span><strong>{{ 15 }}</strong></span>
                </li>
              </ul>
            </div>
            <div class="children">
              <p class="teshurenqun">事件处理</p>
              <ul>
                <li>
                  <span>事件总数</span>
                  <span><strong>{{ 23 }}</strong></span>
                </li>
                <li>
                  <span>处理中</span>
                  <span><strong>{{ 55 }}</strong></span>
                </li>
                <li>
                  <span>未处理</span>
                  <span><strong>{{ 12 }}</strong></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="conter-box">
        <div class="conter-title"><span>事件类型占比分析</span></div>
        <div class="conter-detail shijianzhanbi">
          <div class="list">
            <span>政策咨询 48%</span>
            <span>小区管理 26%</span>
            <span>突发事件 33%</span>
            <span>小区建设 33%</span>
            <span>停车管理33%</span>
          </div>
          <div id="myChart" style="height: 2rem; width: 2rem"></div>
          <div class="list">
            <span>住宅维护行政服务 16%</span>
            <span>社会服务 10%</span>
            <span>民生保障 7%</span>
            <span>环境治理 33%</span>
            <span>公共设施 33%</span>
            <span>出租房屋 33%</span>
          </div>
        </div>
      </div>

      <div class="conter-box">
        <div class="conter-title"><span>最新事件排名</span></div>
        <div class="conter-detail">
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="4">&nbsp;</el-col>
              <el-col :span="5">事件类型</el-col>
              <el-col :span="5">信息数量</el-col>
              <el-col :span="5">办理进度</el-col>
              <el-col :span="5">负责人员</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">1</el-col>
              <el-col :span="5">政策咨询</el-col>
              <el-col :span="5">23</el-col>
              <el-col :span="5">待派发</el-col>
              <el-col :span="5">张**</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">2</el-col>
              <el-col :span="5">社会服务</el-col>
              <el-col :span="5">34</el-col>
              <el-col :span="5">已派发</el-col>
              <el-col :span="5">李**</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">3</el-col>
              <el-col :span="5">环境治理</el-col>
              <el-col :span="5">54</el-col>
              <el-col :span="5">已派发</el-col>
              <el-col :span="5">花**</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">4</el-col>
              <el-col :span="5">小区建设</el-col>
              <el-col :span="5">67</el-col>
              <el-col :span="5">已派发</el-col>
              <el-col :span="5">张**</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">5</el-col>
              <el-col :span="5">停车管理</el-col>
              <el-col :span="5">76</el-col>
              <el-col :span="5">已派发</el-col>
              <el-col :span="5">王**</el-col>
            </el-row>
            
          </div>
        </div>
      </div>
    </div>
    <div class="work-right">
      <div class="conter-box renkouqinkuan wangluo">
        <div class="conter-title"><span>“一网统管”网格员</span></div>
        <div class="conter-detail">
          <ul>
            <li>
              <span>楼门长数量</span>
              <span
                ><strong>{{ 21 }}</strong></span
              >
            </li>
            <li>
              <span>社工数量</span>
              <span
                ><strong>{{ 323 }}</strong></span
              >
            </li>
          </ul>

          <p>社工名单</p>
          <div class="shegong">
            <p>
              <img src="https://img1.baidu.com/it/u=3409776373,1272627760&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"/>
              <span>张*</span>
            </p>
            <p>
              <img src="https://img1.baidu.com/it/u=3318757738,2619951936&fm=253&fmt=auto&app=138&f=JPEG?w=307&h=425"/>
              <span>李*</span>
            </p>
            <p>
              <img src="https://img1.baidu.com/it/u=62174565,3165762114&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=617"/>
              <span>花*</span>
            </p>
            <p>
              <img src="https://img1.baidu.com/it/u=68182688,863258576&fm=253&fmt=auto&app=120&f=JPEG?w=344&h=500"/>
              <span>王**</span>
            </p>
            <p>
              <img src="https://img1.baidu.com/it/u=3621452661,3489431853&fm=253&fmt=auto&app=138&f=JPEG?w=341&h=500"/>
              <span>沈**</span>
            </p>
          </div>
        </div>
      </div>

      <div class="conter-box">
        <div class="conter-title"><span>事件来源统计</span></div>
        <div class="conter-detail eventlaiyuan">
          <ul>
            <li>
              <span>12345热线</span>
              <i></i>
              <strong>{{ 34 }}</strong>
            </li>
            <li>
              <span>巡查上报</span>
              <i></i>
              <strong>{{ 23 }}</strong>
            </li>
            <li>
              <span>运行中心上报</span>
              <i></i>
              <strong>{{ 12 }}</strong>
            </li>
            <li>
              <span>市民城管上报</span>
              <i></i>
              <strong>{{ 42 }}</strong>
            </li>
            <li>
              <span>污染防治平台</span>
              <i></i>
              <strong>{{ 14 }}</strong>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="notOtherwise-right">
      <div class="conter-box">
        <div class="conter-title"><span>办理统计</span></div>
        <div class="conter-detail 135">
          <p class="rexianfenbutitle">总办理工单</p>
          <ul class="list-show">
            <li>
              <span>已结办</span>
              <span><strong>{{ 2 }}</strong></span>
            </li>
            <li>
              <span>待接收</span>
              <span><strong>{{ 22 }}</strong></span>
            </li>
            <li>
              <span>在办件</span>
              <span><strong>{{ 23 }}</strong></span>
            </li>
            <li>
              <span>已逾期</span>
              <span><strong>{{ 56 }}</strong></span>
            </li>
            <li>
              <span>已回访</span>
              <span><strong>{{ 256 }}</strong></span>
            </li>
            <li>
              <span>退回工单</span>
              <span><strong>{{ 245 }}</strong></span>
            </li>
          </ul>
          
          <p class="rexianfenbutitle">办理质量情况</p>
          <div class="zhiliangqingkuan">
            <ul>
              <li>
                <span>办结率</span>
                <div>
                  <el-progress type="circle" :color="'#00D8FF'" :percentage="90"></el-progress>
                </div>
              </li>
              <li>
                <span>重办率</span>
                <el-progress type="circle" :color="'#FFCD5C'" :percentage="25"></el-progress>
              </li>
              <li>
                <span>满意率</span>
                <el-progress type="circle" :color="'#00D8FF'" :percentage="90"></el-progress>
              </li>
              <li>
                <span>逾期率</span>
                <el-progress type="circle" :color="'#F24466'" :percentage="25"></el-progress>
              </li>
            </ul>
            
          </div>

          <p class="rexianfenbutitle">工单分类统计</p>
          <ul class="ul-table">
            <li>
              <span>事件类型</span>
              <span>信息数量</span>
              <span>办理进度</span>
              <span>负责人员</span>
            </li>
            <li>
              <span>婚姻家庭纠纷</span>
              <span>234</span>
              <span>
                <ul class="list-jindu">
                  <li> <strong></strong><i>21</i></li>
                </ul>
              </span>
              <span>张*</span>
            </li>
            <li>
              <span>邻里纠纷</span>
              <span>492</span>
              <span>
                <ul class="list-jindu">
                  <li> <strong></strong><i>21</i></li>
                </ul>
              </span>
              <span>王*</span>
            </li>
            <li>
              <span>赔偿纠纷</span>
              <span>975</span>
              <span>
                <ul class="list-jindu">
                  <li> <strong></strong><i>21</i></li>
                </ul>
              </span>
              <span>李*</span>
            </li>
            <li>
              <span>企业合同纠纷</span>
              <span>321</span>
              <span>
                <ul class="list-jindu">
                  <li> <strong></strong><i>21</i></li>
                </ul>
              </span>
              <span>张*</span>
            </li>
          </ul>

          <p class="rexianfenbutitle">社区办事统计</p>
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="5">接收时间</el-col>
              <el-col :span="5">投诉人</el-col>
              <el-col :span="5">办理</el-col>
              <el-col :span="4">姓名</el-col>
              <el-col :span="5">居住地址</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="5">2021-08-09</el-col>
              <el-col :span="5">王**</el-col>
              <el-col :span="5"></el-col>
              <el-col :span="4">张**</el-col>
              <el-col :span="5">好景国际</el-col>
            </el-row>
             <el-row type="flex" justify="space-between">
              <el-col :span="5">2021-09-012</el-col>
              <el-col :span="5">李**</el-col>
              <el-col :span="5"></el-col>
              <el-col :span="4">唐**</el-col>
              <el-col :span="5">好景国际</el-col>
            </el-row>
             <el-row type="flex" justify="space-between">
              <el-col :span="5">2021-12-01</el-col>
              <el-col :span="5">肖**</el-col>
              <el-col :span="5"></el-col>
              <el-col :span="4">张**</el-col>
              <el-col :span="5">好景国际</el-col>
            </el-row>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
export default {
  data() {
    return {};
  },
  mounted() {
    let option = {
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '90%',
          label: {
            normal: {
              position: 'inner',
              show : false
            }
          },
          data: [
            { value: 1048, name: '1' },
            { value: 735, name: '2' },
            { value: 580, name: '3' },
            { value: 484, name: '4' },
            { value: 300, name: '5' },
            { value: 23, name: '6' },
            { value: 32, name: '7' },
            { value: 432, name: '8' },
            { value: 23, name: '9' },
            { value: 78, name: '10' },
          ],
        }
      ]
    };
    var myChart = echarts.init(document.getElementById("myChart"));
    myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
.work {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.5rem 0;
  box-sizing: border-box;
  .work-left {
    display: flex;
    flex-direction: column;
    width: 5.8rem;
  }
  .work-right {
    display: flex;
    flex-direction: column;
    width: 5.8rem;
  }
  .notOtherwise-right {
    display: flex;
    flex-direction: column;
    width: 5.8rem;
  }
}
.notOtherwise-right {
  p {
    text-align: center;
  }
}
.rexianfenbutitle {
  position: relative;
  font-size: 0.2rem;
  text-align: center;
  &::after {
    content: '';
    position: absolute;
    width: 1.8rem;
    height: 3px;
    left: 0;
    top: 0.1rem;
    background: url('../../assets/person/xiao_title.png') no-repeat;
  }
  &::before {
    content: '';
    position: absolute;
    width: 1.8rem;
    height: 3px;
    right: 0;
    top: 0.1rem;
    transform: rotate(180deg);
    background: url('../../assets/person/xiao_title.png') no-repeat;
  }
}
.list-show {
  height: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
  li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    span {
      font-size: 0.18rem;
      font-weight: 500;
      strong {
        color: #00fe90;
        font-size: 0.3rem;
        font-weight: 400;
      }
    }
  }
}
.zhiliangqingkuan {
  ul {
    display: flex;
    justify-content: space-between;
    li {
      width: 24%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.1rem 0;
      div {
        width: 1rem;
        height: 1rem;
      }
      span {
        font-size: 0.2rem;
        margin-bottom: 0.1rem;
      }
    }
  }
}
/deep/.el-progress-circle {
  width: 1rem !important;
  height: 1rem !important;
}

.renkouqinkuan {
  display: flex;
  flex-direction: column;
  ul {
    min-height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.3rem;
    box-sizing: border-box;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      span {
        font-size: 0.18rem;
        font-weight: 500;
        strong {
          color: #00fe90;
          font-size: 0.4rem;
          font-weight: 400;
        }
      }
    }
  }
  .other-person {
    width: 100%;
    display: flex;
    p {
      text-align: center;
    }
    .party {
      width: 50%;
    }
    .children {
      width: 50%;
    }
    .teshurenqun {
      position: relative;
      font-size: 0.2rem;
      &::after {
        content: '';
        position: absolute;
        width: 0.8rem;
        height: 3px;
        left: 0.1rem;
        top: 0.1rem;
        background: url('../../assets/person/xiao_title.png') no-repeat;
      }
      &::before {
        content: '';
        position: absolute;
        width: 0.8rem;
        height: 3px;
        right: 0.1rem;
        top: 0.1rem;
        transform: rotate(180deg);
        background: url('../../assets/person/xiao_title.png') no-repeat;
      }
    }
  }
}
.eventlaiyuan {
  padding: 0.15rem;
  box-sizing: border-box;
  ul {
    display: flex;
    flex-direction: column;
    li {
      display: flex;
      justify-content: space-around;
      align-items: center;
      line-height: 0.5rem;
      span {
        display: inline-block;
        font-size: 0.18rem;
        width: 1.2rem;
      }
      i {
        display: inline-block;
        width: 3rem;
        height: 0.2rem;
        background: #3dadf9;
      }
      strong {
        color: #02E58D;
        font-size: 0.2rem;
      }
    }
  }
}

.ul-table {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 0.1rem;
  padding: 0.15rem;
  box-sizing: border-box;
  li {
    display: flex;
    line-height: 0.25rem;
    span {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 0.14rem;
      &:nth-child(1) {
        width: 1rem;
      }
      &:nth-child(2) {
        width: 1rem;
      }
      &:nth-child(3) {
        flex: 1;
      }
      &:nth-child(4) {
        width: 0.6rem;
      }
    }
  }

}
.shijianzhanbi {
  display: flex;
  justify-content: space-around;
  height: 2rem;
  .list {
    display: flex;
    flex-direction: column;
    span {
      line-height: 0.3rem;
      font-size: 0.16rem;
    }
  }
}
.wangluo {
  padding: 0.1rem;
  ul {
    li {
      flex-direction: row;
      justify-content: flex-start;
      width: 50%;
      span {
        font-weight: 400;
        font-size: 0.25rem;
        strong {
          font-size: 0.4rem;
          padding-left: 0.2rem;
        }
      }
    }
  }
  p {
    font-size: 0.2rem;
    padding: 0.1rem 0;
  }
  .shegong {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem;
    p {
      display: flex;
      justify-items: center;
      align-items: center;
      flex-direction: column;
      width: 19%;
      img {
        width: 100%;
        height: 1.2rem;
      }
      span {
        font-size: 0.16rem;
        margin-top: 0.1rem;
      }
    }
  }
}
.conter-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #071726bd;
  padding: 0.12rem;
  border-radius: 0.05rem;
  margin-bottom: 0.15rem;
  .conter-title {
    position: relative;
    color: #fff;
    font-size: 0.24rem;
    height: 0.4rem;
    &::after {
      position: absolute;
      bottom: -0.1rem;
      left: 0;
      height: 0.1rem;
      width: 100%;
      content: "";
      display: inline-block;
      background: url("../../assets/person/title_bottom.png") no-repeat;
      background-size: 100% 100%;
    }
    span {
      display: inline-block;
      position: relative;
      text-indent: 0.24rem;
      &::after {
        position: absolute;
        top: 0.05rem;
        left: 0;
        content: "";
        display: inline-block;
        width: 0.14rem;
        height: 0.14rem;
        border: 0.02rem solid #65beff;
        border-radius: 50%;
        opacity: 1;
      }
    }
  }
  .conter-detail {
    position: relative;
    width: 100%;
    margin-top: 0.2rem;
  }
}
.list-jindu {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 0.15rem;
    li {
      display: flex;
      align-items: center;
    }
    strong {
      display: inline-block;
      width: 2rem;
      height: 0.08rem;
      line-height: 0.16rem;
      background: #00d8ff;
      margin-right: 0.1rem;
    }
  }
/deep/.el-progress__text {
  color: #02E58D;
  font-size: 0.3rem !important;
}
</style>